<script setup lang="ts">
const request = useRequest();

interface CatImage {
  id: string;
  url: string;
  width: number;
  height: number;
}

const show = ref(false);

const items = reactive<CatImage[]>([]);
const params = reactive({
  page: 0,
  limit: 10,
  size: "med",
  mime_types: "jpg",
  format: "json",
  has_breeds: true,
  order: "RANDOM",
});

async function onLoad() {
  show.value = true;
  params.page += 1;
  const url = "https://api.thecatapi.com/v1/images/search";
  const result = await request.get<CatImage[]>(url, params);
  items.push(...result);
  show.value = false;
  console.log(items);
}

onLoad();
</script>

<template>
  <div class="home">
    <n-infinite-scroll @load="onLoad" :distance="100" content-class="p-3">
      <n-spin class="h-full" :show="show" description="加载中">
        <n-grid cols="4" x-gap="12" y-gap="12">
          <n-grid-item v-for="item in items" :key="item.id">
            <n-card class="h-full" content-class="!p-2">
              <n-image :src="item.url" width="100%" height="100%">
                <template #placeholder>
                  <div class="w-100 h-100" />
                </template>
              </n-image>
            </n-card>
          </n-grid-item>
        </n-grid>
      </n-spin>
    </n-infinite-scroll>
  </div>
</template>

<style lang="scss">
.home {
  @apply absolute inset-0;
}
</style>
